<template>
	<view>

		<z-nav-bar :bgColor="['#3699ff', '#0075ee']" bgColorAngle="90" fontColor="#FFF" homeState="2000"
			backState="1000">
			<view class="title-box">
				<text>违章查询</text>
			</view>
		</z-nav-bar>

		<u-sticky :offsetTop="offsetTop">
			<view class="searchBox">
				<view class="search">
					<u--input v-model="keyword" clearable border="none" fontSize="12" placeholder="输入车牌号查询"
						@blur="isSearch = false" @focus="isSearch = true" @change="searchChange" prefixIcon="search"
						prefixIconStyle="font-size: 22px;color: #909399" />
				</view>
			</view>
		</u-sticky>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="listContainer">
				<view class="listTitle flex-row-center-sb">
					<text>已选车辆:{{selectedCarIds.length}}辆</text>
					<text style="color: #2879FF;margin-right: 20rpx;"
						@click="selectedAll()">{{isSelectedAll ? '取消全选' : '全选'}}</text>
				</view>

				<view class="listItem" v-for="(item, index) in carList" :key="item.id" @click="checkedCar(item)">
				
					<image class="checkBox"
						:src="item.selected?'/static/other/radio_selected.png' : '/static/other/radio_default.png'"
						mode=""></image>
					<view class="text-line">
						<text class="title" style="width: 350rpx;">品牌/车系/车型:</text>
						<text class="value">{{item.carInfo|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="title">车牌号:</text>
						<text class="value">{{ item.carNo | filterNull }}</text>
					</view>

					<view class="text-line">
						<text class="title">车辆状态:</text>
						<text class="value">{{item.carStatus|carStatus}}</text>
					</view>
				</view>

			</view>
		</mescroll-body>

		<button type="info" class="sub-btn" @click="illegalQuery">违章查询</button>
	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import * as illegalApi from '@/api/illegal-api.js';

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				offsetTop: 0,
				keyword: '',
				isSearch: false,
				carList: [],
				isSelectedAll: false
			};
		},
		computed: {
			
			selectedCarIds() {
				let carIds = [];
				this.carList.forEach((item) => {
					if(item.selected) {
					   carIds.push(item.carNo);
					}
				  
				})
				return carIds
			}
		},
		onLoad: function(option) {
			//获取手机状态栏高度
			this.offsetTop = uni.getSystemInfoSync()['statusBarHeight'] + (92 / 750 * uni.getSystemInfoSync()
				.windowWidth) - 0.5;

		},
		methods: {
			upCallback(page) {
				illegalApi.apiCarBasicList({
					carNo: this.keyword,
					type: 1,
					pageNum: page.num,
					pageSize: 100,
				}).then(res => {
					//设置列表数据
					if (page.num == 1) this.carList = []; //如果是第一页需手动制空列表
					this.carList = this.carList.concat(res.rows); //追加新数据
					this.isSelectedAll = false;
					this.mescroll.endBySize(res.rows.length, res.total);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//搜索
			searchChange(value) {
				this.keyword = value;
				this.mescroll.triggerDownScroll();
			},
			// 选择车辆
			checkedCar(item) {
				item.selected = !item.selected;
				this.carList = [...this.carList];
				this.$forceUpdate()
			},
			// 全选
			selectedAll() {
				this.isSelectedAll = !this.isSelectedAll;
				if (this.isSelectedAll) {
					this.carList.map(car => {
						car.selected = true;
					})
				} else {
					this.carList.map(car => {
						car.selected = false;
					})
				}
                this.carList = [...this.carList];
				this.$forceUpdate()
			},
			// 违章查询
			illegalQuery() {
				 if(this.selectedCarIds.length ==0) {
					 this.$u.toast('请选择要查询的车辆');
				 }else {
					 const carIds = this.selectedCarIds.join(',');
					 illegalApi.illegalQuery({
						 carIds : carIds
					 }).then(res=>{
						 uni.showModal({
						 	title: '提示',
						 	content: '已提交违章查询申请...',
						 	showCancel : false,
						 	confirmText: '确定',
						 	success: (res) => {
						 		if (res.confirm) {
						 			uni.navigateBack();
						 		}
						 	}
						 })
					 })
				 }
                  
			}
		}
	};
</script>

<style lang="scss" scoped>
	.searchBox {
		padding: 20upx;
		display: flex;
		align-items: center;
		// background-color: #fff;
		background: linear-gradient(90deg, #3599FF 0%, #0275ED 100%);

		.city {
			font-size: 30upx;
			font-weight: bold;
			color: #fff;
		}

		.search {
			flex: 1;
			padding: 0 20upx;
			margin: 0 20upx;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24upx;
			background-color: #ffffff;
			border-radius: 30rpx;
		}
	}

	.listContainer {
		margin: 20rpx;
		margin-bottom: 50rpx;
		background: #ffffff;
		border-radius: 16px;
		padding: 24rpx 0;

		.listTitle {
			margin-left: 24rpx;
			color: #333333;
			font-size: 28rpx;
		}

		.listItem {
			position: relative;
			background: #ffffff;
			box-shadow: 0px 4rpx 16rpx 0px rgba(1, 10, 18, 0.1);
			border-radius: 8rpx;
			margin: 32rpx 24rpx;
			box-sizing: border-box;
			padding: 10rpx 0;

			.checkBox {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.text-line {
				padding: 5rpx 0;
				font-size: 28rpx;

				.title {
					flex-wrap: inherit;
					color: #666666;
					margin-right: 10rpx;
				}

				.value {
					color: #333333;
					margin-right: 80rpx;
				}
			}
		}
	}
</style>
